<template>
	<view>
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<view class="application-record" style="height: 50rpx; background-color: #786cff" @click="jumpToList">
					添加记录
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class='list'>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">渔具店名称</text>
							<view style="display: flex;">
								<input type="text" maxlength="30" v-model="shops[curr].shopName" style="width: auto;" />								
								<text v-if="shops.length > 1" class="iconfont icon-xiala1" style="margin-left: 10rpx; display: inline-block; position: relative; transform: rotate(180deg); -webkit-transform: rotate(180deg); width: 80rpx; text-align: center"
								 @click="onTapMerName" />
							</view>
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">渔具店地址</text>
							<input type="text" maxlength="128" v-model="shops[curr].shopAddress" />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">渔具店定位</text>
							<input type="text" maxlength="128" v-model="shops[curr].shopAddress" />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<!-- <i class="icon iconfont icon-shoujihao"></i> -->
							<text class="item-name">渔具店电话</text>
							<input type="text" maxlength="16" v-model="shops[curr].shopPhone" />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<view style="display: flex; width: 100%; justify-content: space-between;">
								<text class="item-name">渔具店简介</text>
								<view style="color: #666666; font-size: 24rpx;">
									<text v-if="shops[curr].briefInfo">{{ shops[curr].briefInfo.length }}</text>
									<text v-else>0</text>
									/200
								</view>
							</view>
							<view style="border-radius: 10px; margin-top: 20rpx; width: 100%; background: #f5f5f5; padding: 20rpx;">
								<textarea v-model="shops[curr].briefInfo" value="" placeholder="请填写简介信息" placeholderClass="placeholderClass" maxlength="200" />
							</view>
						</view>
					</view>
					<!-- ====== begin 上传营业执照多图功能 ====== -->
					<view class="item">
						<view class='acea-row row-middle'>
							<text class="item-title">渔具店图片</text>
							<text class="item-desc">(图片最多可上传10张,第一张做为头像,其它为详情图片。格式支持JPG、PNG、JPEG)</text>
							<view class="upload">
								<view class='pictrue' v-for="(item,index) in shops[curr].images" :key="index" :data-index="index" @click="previewPics(e, 1)">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='delPic(index, 1)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadPic1' v-if="shops[curr].images.length < 10">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<!-- ====== begin 头像裁剪功能 ====== -->
					<avatar @upload="doUpload" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
					<!-- ====== end 头像裁剪功能 ====== -->
					<!-- ====== end 上传营业执照多图功能 ====== -->
					
					<view v-if="shops[curr].authStatus!=1" class="item no-border">
						<view class="acea-row row-middle">
							<text class="item-name">申请认证</text>
							<view>
								<text style="margin-right: 20rpx;">{{shops[curr].applied?"申请认证":"不认证"}}</text>
								<switch :checked="shops[curr].applied" @change="switchApply" />
								<view class="item-desc">认证后，店主有权进行管理</view>
							</view>
						</view>
					</view>
					<view v-if="shops[curr].applied==1 || shops[curr].authStatus==1" class="item">
						<view class="acea-row row-middle">
							<!-- <i class="icon iconfont icon-yonghu3"></i> -->
							<text class="item-name">店主姓名</text>
							<input type="text" maxlength="32" v-model="shops[curr].realName" />
						</view>
					</view>
					<!-- ====== begin 上传营业执照多图功能 ====== -->
					<view v-if="shops[curr].applied==1 || shops[curr].authStatus==1" class="item no-border">
						<view class='acea-row row-middle'>
							<text class="item-title">营业执照图片</text>
							<text class="item-desc">(图片最多可上传10张,用于认证审核,图片格式支持JPG、PNG、JPEG)</text>
							<view class="upload">
								<view class='pictrue' v-for="(item,index) in shops[curr].qualificationImages" :key="index" :data-index="index" @click="previewPics(e, 2)">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='delPic(index, 2)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadPic2' v-if="shops[curr].qualificationImages.length < 10">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<!-- ====== end 上传营业执照多图功能 ====== -->
					
					<button class='submitBtn on' @click="formSubmit">提交</button>
				</view>
			</view>
		</form>
		
		<!-- ====== begin 授权功能 ====== -->
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<!-- ====== end 授权功能 ====== -->
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	
	import {
		getMyShops,
		addShop,
		modifyShop,
	} from '@/api/fsh.js';
	
	import {
		mapGetters
	} from "vuex";
	
	// ====== begin 头像裁剪功能 ======
	import store from '@/store';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
	// ====== end 头像裁剪功能 ======
	
	// ====== begin 授权功能 ======
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		toLogin
	} from '@/libs/login.js';	
	// ====== end 授权功能 ======
	
	const app = getApp();
	export default {
		components: {
			// ====== begin 授权功能 ======
			// #ifdef MP
			authorize,
			// #endif
			// ====== end 授权功能 ======
			
			// ====== begin 头像裁剪功能 ======
			avatar,
			// ====== end 头像裁剪功能 ======
		},
		
		data() {
			return {
				shopEditType: 1, // 1-客户添加, 2-客户修改, 3-客户修改
				 
				// ====== begin 授权功能 ======
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				// ====== end 授权功能 ======
				
				shops: [{
					shopName: "",		// 名称
					shopAddress: "",	// 地址
					shopPhone: "",		// 联系电话
					briefInfo: "", 		// 简介
					realName: "",		// 店主姓名
					applied: 0,			// 是否申请认证：1-申请认证, 0-不申请认证
					images: [], 		// 多图功能
					qualificationImages: [], // 上传营业执照多图功能
				}],
				curr: 0
			};
		},
		
		
		// ====== begin 授权功能 ======
		computed: mapGetters(['isLogin']),
		// ====== end 授权功能 ======
		
		onLoad(options) {
			console.log("fsh_gear_edit::onLoad", options);
			this.shopEditType = options.shopEditType?options.shopEditType:1;
			this.editShopId = parseInt(options.editShopId);
			uni.setNavigationBarTitle({
				title: (this.shopEditType == 1)?"添加渔具店":"修改渔具店"
			});
			if (this.isLogin) { // 授权功能
				if(this.shopEditType != 1)
					this.loadMyMerchants();
			} else {
				// ====== begin 授权功能 ======
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
				// ====== end 授权功能 ======
			}
			if (options.mer_i_id) {
				this.mer_i_id = options.mer_i_id
				uni.showLoading({
					title: '获取数据中',
				});
				this.$nextTick(function() {
					this.getGoodsDetails(options.mer_i_id)
				})
			}
		},
		onShow() {

		},
		methods: {
			// ====== begin 授权功能 ======
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				if(this.shopEditType == 2)
					this.loadMyMerchants();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// ====== end 授权功能 ======
			
			// ====== begin 上传营业执照多图功能 ======
			// ====== begin 头像裁剪功能 ======
			uploadPic1() {
				if(this.shops[this.curr].images.length < 1) { // 第1张作为头像，进行裁剪，其它不裁剪
					let avatar = this.$refs.avatar;
					avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
				}
				else {
					// this.$util.uploadImageOne('upload/image', res=> {
					// 	this.shops[this.curr].images.push(res.data.path);
					// 	// this.$set(this, 'shops[this.curr].images', this.shops[this.curr].images);
					// });
					let avatar = this.$refs.avatar;
					avatar.fChooseImg(1,{selWidth: '730upx', selHeight: '1024upx', inner: true});
				}
			},
			doUpload(rsp) {
				let that = this
				console.log(rsp);	
				
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/image/field',
					filePath: rsp.path,
					name: 'field',
					formData: {
						'filename': rsp.path
					},
					header: {
						// #ifdef MP
						"Content-Type": "mulMyTipart/form-data",
						// #endif
						[TOKENNAME]: 'Bearer ' + store.state.app.token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						let imgData = JSON.parse(uploadFileRes.data)
						that.shops[that.curr].images.push(imgData.data.path);
					},
					complete(res) {
						console.log(res)
					}
				});		
			},
			// ====== end 头像裁剪功能 ======
			
			// 上传图片
			uploadPic2() {
				this.$util.uploadImageOne('upload/image', res=> {
					this.shops[this.curr].qualificationImages.push(res.data.path);
					// this.$set(this, 'shops[this.curr].images', this.shops[this.curr].images);
				});
			},
			// 图片预览
			previewPics(e, t) {
				let idx = e.currentTarget.dataset.index;
				this.imgPreview(t == 1 ? this.shops[this.curr].images : this.shops[this.curr].qualificationImages, idx);
			},
			imgPreview(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			// 删除图片
			delPic(index, t) {
				if(t == 1)
					this.shops[this.curr].images.splice(index, 1);
				else
					this.shops[this.curr].qualificationImages.splice(index, 1);
				// this.$set(this, 'shops[this.curr].images', this.shops[this.curr].images);
			},
			// ====== end 上传营业执照多图功能 ======
			
			
			// 针对一个人开了多个商户的情况，点击名称可以进行切换
			onTapMerName() {
				let merNames = this.shops.map(a=>a.merName);
				if(merNames.length < 2)
					return;
				
				uni.showActionSheet({
					itemList: merNames,
					success: res => {
						this.curr = res.tapIndex;
						console.log('switch merchant, curr=%o, merchant=%o', this.curr, this.shops[this.curr]);
					},
					fail: err => {
						//console.log(res.errMsg);
					}
				})
			},
			
			// 开启商户
			switchApply(e) { 
				console.log("switchApply", e.detail.value);
				this.shops[this.curr].applied = e.detail.value?1:0;
			},
			
			// 校验表单
			validateForm() {
				if (!this.shops[this.curr].shopName) return this.$util.Tips({
					title: '请输入渔具店名称'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.shops[this.curr].shopPhone)) return this.$util.Tips({
					title: '请输入正确的电话号码'
				});
				if (!this.shops[this.curr].shopAddress) return this.$util.Tips({
					title: '请输入渔具店地址'
				});
				if(this.shops[this.curr].applied == 1 || this.shops[this.curr].authStatus==1) {
					if (!this.shops[this.curr].realName) return this.$util.Tips({
						title: '请输入店主姓名'
					});
					if (this.shops[this.curr].images.length < 1) return this.$util.Tips({
						title: '请上传渔具店图片'
					});
					if (this.shops[this.curr].qualificationImages.length < 1) return this.$util.Tips({
						title: '请上传营业执照等资质图片'
					});
				}
				
				return true;
			},
			
			// 提交修改
			formSubmit(e) {
				let that = this;
				if (that.validateForm()) {
					uni.showLoading({
						title:"提交中..."
					})
					
					let data = JSON.parse(JSON.stringify(this.shops[this.curr])); 
					data.images = (data.images.length > 0) ? data.images.join(",") : "";
					data.qualificationImages = (data.qualificationImages.length > 0) ? 
						data.qualificationImages.join(",") : "";
					if(this.shopEditType == 1) {
						addShop(data).then(res => {
							uni.hideLoading();
							uni.showModal({
								title: '提交成功',
								showCancel: false,
								content: '',
								success: function(res) {
									uni.navigateBack();
								}
							});
						}).catch(err => {
							uni.hideLoading();
							that.$util.Tips({
								title: err.msg
							});
						})
					}
					else {
						modifyShop(data).then(res => {
							uni.hideLoading();
							uni.showModal({
								title: '提交成功',
								showCancel: false,
								content: '',
								success: function(res) {
									uni.navigateBack();
								}
							});
						}).catch(err => {
							uni.hideLoading();
							that.$util.Tips({
								title: err.msg
							});
						})
					}
					
				}
			},

			loadMyMerchants() {
				uni.showLoading({
					title:"加载中..."
				})
				
				getMyShops(this.editShopId).then(res=>{
					this.shops = res.entity.list.map(a=> {
						a.images = a.images.split(",").filter(a=>a);
						a.qualificationImages = a.qualificationImages.split(",").filter(a=>a);
						return a;
					});
					this.curr = 0;
					console.log("getMyShops", this.editShopId, this.shops)
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
			jumpToList() {
				uni.navigateTo({
					url: "/pages/shop/shop_add_record"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 20rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}
		
	.title {
		font-size: xxx-large;
		font-weight: bolder;
		color: white;
		position: absolute;
		display: flex;
		justify-content: center;
		top: 20rpx;
		width: 100%;
	}
	
	.item-name{
		width: 190rpx;
	}

	.merchantsSettled {
		background: linear-gradient(#f7f7f7 0%, #dad9d9 100%);
		// height: 140vh;
	}

	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}

	.merchantsSettled .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 22px 0;
		margin: 80rpx 15px;
		position: absolute;
		top: 0rpx;
		// margin-top: -160px;
		width: calc(100% - 30px);
	}

	.merchantsSettled .list .item {
		padding: 50rpx 0 20rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		margin: 0 20px;

		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}

		.item-title {
			color: #666666;
			font-size: 28rpx;
			display: block;
		}

		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}

	.acea-row,
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.upload {
		margin-top: 20rpx;
	}

	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}

	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}


		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;

			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}

		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}

	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}

	.merchantsSettled .list .item input {
		width: 400rpx;
		font-size: 30rpx;
		// margin-left: 30px;
	}
	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}
	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}
	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}
	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}
	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid #E93323;
		border-radius: 15px;
		color: #E93323;
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.merchantsSettled .submitBtn {
		width: 588rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		background: #E3E3E3;
		margin-top: 25px;
	}
	.merchantsSettled .submitBtn.on {
		background: #E93323;
	}
	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}
	
	/deep/ uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}
	
</style>
